<template>
  <div class="container">
    <div class="notice" v-show="!noticeShow" @click="handleNoticeclick">
      <span class="iconfont">&#xe666;</span>
      5月1日-10月7日逢周末、法定节假日自驾至深圳东部地区（含梅沙片区、大鹏片区）的游客，请关注“深圳交警”微信公众号并预约出行。
      <span class="iconfont notice-icon">&#xe61b;</span>
    </div>
    <div class="notice-fixed" v-show="noticeShow">
      <div class="notice-title"><span class="iconfont icon">&#xe666;</span>景区公告</div>
      <div class="notice-detail">5月1日-10月7日逢周末、法定节假日自驾至深圳东部地区（含梅沙片区、大鹏片区）的游客，请关注“深圳交警”微信公众号并预约出行。</div>
      <div class="notice-close iconfont" @click="handleNoticeClose">&#xe61a;</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailNotice',
  data () {
    return {
      noticeShow: false
    }
  },
  methods: {
    handleNoticeclick () {
      this.noticeShow = true
    },
    handleNoticeClose () {
      this.noticeShow = false
    }
  }
}
</script>

<style lang="stylus" scoped>
  .container
    background-color #fff5e5
    color #ff8300
    margin-bottom .2rem
    height .88rem
    line-height .88rem
    padding-left .23rem
    .notice
      padding-right .6rem
      overflow hidden
      white-space nowrap
      text-overflow ellipsis
      position relative
      .notice-icon
        right .2rem
        position absolute
        color gray
    .notice-fixed
      position fixed
      z-index 999
      top 0
      right 0
      bottom 0
      left 0
      background-color rgba(255, 255, 255, .9)
      .notice-title
        width 100%
        color #f67353
        font-size .4rem
        text-align center
        position absolute
        top 2rem
        .icon
          margin-right .18rem
          font-size .4rem
      .notice-detail
        position absolute
        top 3.6rem
        line-height .46rem
        color: #333
        padding 0 .35rem
        word-wrap break-word
      .notice-close
        position fixed
        width 100%
        height .4rem
        font-size .4rem
        bottom .8rem
        text-align center
        color #212121
</style>
